<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../../assets/js/vue.js"></script>
    <title>Component-4</title>
</head>
<body>
<div id="app">
    <component v-bind:is="index"></component>
    <button @click="change">changeComponent</button>
</div>

<script type="text/javascript">
    var componentA = {template: `<div style="color: red">This is templateA</div>`}
    var componentB = {template: `<div style="color: green">This is templateB</div>`}
    var componentC = {template: `<div style="color: pink">This is templateC</div>`}

    var app = new Vue({
        el: "#app",
        data: {index: "componentA"},
        components: {
            "componentA": componentA,
            "componentB": componentB,
            "componentC": componentC
        },
        methods: {
            change: function () {
                if (this.index == "componentA") {
                    this.index = "componentB";
                } else if (this.index == "componentB") {
                    this.index = "componentC";
                } else {
                    this.index = "componentA";
                }
            }
        }
    })
</script>
</body>
</html>